import React, { Component } from "react";
import { withRouter,Redirect } from "react-router-dom";
import { connect } from "react-redux";
import userImg from "../../assets/images/user2.png";
import {
  changeUserNameAction,
  changeTelAction,
  changeMaAction,
  changePwdAction,
  handleRegistAction,
  getCodeAction2,
} from "../../store/actionCreator/index";
import styles from "./register.module.scss";
class RegisterPage extends Component {
  render() {
    if (this.props.isRegist) {
      return <Redirect to="/login"></Redirect>;
    } else {
    return (
      <div>
        <div className={styles.loginBox}>
          <div className={styles.TopNav}>
            <div className={styles.topNavLeft}>
              <svg
                className={styles.icon}
                aria-hidden="true"
                onClick={() => {
                  this.props.history.push("/login");
                }}
              >
                <use href="#icon-zuojiantou"></use>
              </svg>
            </div>
            <div className={styles.topNavCenter}></div>
            <div className={styles.topNavRight}></div>
          </div>
          <div className={styles.loginImg}>
            <div className={styles.userimg}>
              <img src={userImg} alt="" ></img>
            </div>
          </div>
          <div className={styles.loginInput}>
            <div className={styles.name}>
              <label>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-wode"></use>
                </svg>
              </label>
              <input
                className={styles.inputTel}
                placeholder="用户名"
                onChange={this.props.changeUserName.bind(this)}
                value={this.props.userName}
              ></input>
            </div>
            <div className={styles.tel1}>
              <label>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-mingpian"></use>
                </svg>
              </label>
              <input
                className={styles.inputTel}
                placeholder={this.props.inpNamePH}
                onChange={this.props.changeInputTel.bind(this)}
                value={this.props.telephone}
              ></input>
            </div>
            <div className={styles.tel}>
              <label>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-xiaoxi1"></use>
                </svg>
              </label>
              <input
                className={styles.inputTel}
                placeholder="验证码"
                onChange={this.props.changeInputMa.bind(this)}
              ></input>
              <span
                className={styles.getCode}
                onClick={this.props.getCode.bind(this,this.props.telephone)}
              >
                获取验证码
              </span>
            </div>
            <div className={styles.pwd}>
              <label>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-suo"></use>
                </svg>
              </label>
              <input
                type="password"
                className={styles.inputPassword}
                placeholder={this.props.inputPasswordPH}
                onChange={this.props.changeInputPassword.bind(this)}
                value={this.props.password}
              ></input>
            </div>
            <div>
              已同意并阅读<a href="https://h5.ele.me/service/agreement/#HEAEDER_SHOW=1&initTitle=%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96&key=ruleQue50">《用户服务协议》</a>和
              <a href="https://h5.ele.me/service/agreement/#HEAEDER_SHOW=1&initTitle=%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96&key=ruleQue50">《隐私权政策》</a>
            </div>
            <button
              onClick={this.props.handleRegistClick.bind(
                this,
                this.props.userName,
                this.props.telephone,
                this.props.ma,
                this.props.password,
                this.props.code1
              )}
            >
              注册
            </button>
          </div>
        </div>
      </div>
    );
  }
}
}
const mapStateToPorps = (state) => {
  return {
    isRegist: state.registerReducer.isRegist,
    inpNamePH: state.registerReducer.inpNamePH,
    inputPasswordPH: state.registerReducer.inputPasswordPH,
    inputTel: state.registerReducer.inputTel,
    inputPassword: state.registerReducer.inputPassword,
    userName: state.registerReducer.userName,
    telephone: state.registerReducer.telephone,
    ma: state.registerReducer.ma,
    password: state.registerReducer.password,
    code1: state.registerReducer.code1,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    changeUserName(e) {
      dispatch(changeUserNameAction(e.target.value));
    },
    changeInputTel(e) {
      dispatch(changeTelAction(e.target.value));
    },
    changeInputMa(e){
      dispatch(changeMaAction(e.target.value))
    },
    changeInputPassword(e) {
      dispatch(changePwdAction(e.target.value));
    },

    handleRegistClick: function (inpUserName,inpTelVal,ma,inpPasswordVal,code1) {
      dispatch(handleRegistAction(inpUserName,inpTelVal,ma,inpPasswordVal,code1));
    },
    
    getCode: function (inpTelVal) {
      dispatch(getCodeAction2(inpTelVal));
    },
  };
};

export default withRouter(
  connect(mapStateToPorps, mapDispatchToProps)(RegisterPage)
);
